<template>
  <div>
    <div class="order-body" v-loading="loading">
      <div class="no-pay-box" v-if="info.state == 1">
        <div class="on-pay-left-box on-pay-blue" v-if="info.total_price > 0">
          待支付
        </div>
        <div class="on-pay-right-box text-orange" v-if="info.total_price > 0">
          您的订单将与{{ str }}后失效，请尽快支付~
        </div>
        <div class="on-pay-left-box on-pay-blue" v-if="info.total_price == 0">
          待确认
        </div>
        <div class="on-pay-right-box text-orange" v-if="info.total_price == 0">
          您的订单将与{{ str }}后失效，请尽快点击确认提交到保司~
        </div>
      </div>
      <div class="no-pay-box" v-if="info.state == 0">
        <div class="on-pay-left-box on-pay-grey">已取消</div>
        <div class="on-pay-right-box text-grey">您的订单已取消~</div>
      </div>
      <div class="no-pay-box" v-if="info.state == 2">
        <div class="on-pay-left-box on-pay-green">已支付</div>
        <div class="on-pay-right-box text-grey">
          批增人员{{ info.inc_num }}人，批减人员{{ info.dec_num }}人~
        </div>
      </div>
      <div class="title-box">批单详情</div>
      <div class="info-box" v-loading="load">
        <el-row :gutter="10">
          <el-col :span="12">
            <div class="info-item-box">
              <span class="info-title-box">保单号：</span
              ><span>{{ info.order_no }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="info-item-box">
              <span class="info-title-box">批单号：</span
              ><span>{{ info.pd_no ? info.pd_no : "----" }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="info-item-box">
              <span class="info-title-box">生效时间：</span
              ><span>{{ info.start_time }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="info-item-box">
              <span class="info-title-box">失效时间：</span
              ><span>{{ info.end_time }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="info-item-box">
              <span class="info-title-box">合计保费：</span
              ><span>{{ info.total_price }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="info-item-box">
              <span class="info-title-box">批改时间：</span
              ><span>{{ info.create_time }}</span>
            </div>
          </el-col>
          <el-col :span="12" v-if="info.state == 2">
            <div class="info-item-box">
              <div v-if="!info.url">
                <span class="info-title-box">批单获取：</span>
                <el-button
                  type="text"
                  v-if="!info.url"
                  size="default"
                  @click="huoq"
                  >点击获取</el-button
                >
              </div>

              <div v-else>
                <span class="info-title-box">批单下载：</span
                ><a :href="info.url" target="_blank">点击下载</a>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
      <div class="title-box">发票信息</div>
      <div class="info-box" v-if="info.invoice">
        <el-row :gutter="10">
          <el-col :span="12">
            <div class="info-item-box">
              <span class="info-title-box"> 纳税人名称：</span
              ><span>{{ info.invoice.invoice_name }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="info-item-box">
              <span class="info-title-box">纳税人识别号：</span
              ><span>{{ info.invoice.invoice_no }}</span>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="info-item-box">
              <span class="info-title-box">发票类型：</span
              ><span>{{
                info.invoice.invoice_type == 1 ? "专票" : "普票"
              }}</span>
            </div>
          </el-col>
          <el-col :span="24" v-if="info.invoice.invoice_type == 1">
            <div class="info-item-box">
              <span class="info-title-box">税务登记地址：</span
              ><span>{{ info.invoice.invoice_address }}</span>
            </div>
          </el-col>
          <el-col :span="12" v-if="info.invoice.invoice_type == 1">
            <div class="info-item-box">
              <span class="info-title-box">税务登记联系电话：</span
              ><span>{{ info.invoice.invoice_mobile }}</span>
            </div>
          </el-col>
          <el-col :span="12" v-if="info.invoice.invoice_type == 1">
            <div class="info-item-box">
              <span class="info-title-box">税务登记银行名称：</span
              ><span>{{ info.invoice.invoice_bank }}</span>
            </div>
          </el-col>
          <el-col :span="12" v-if="info.invoice.invoice_type == 1">
            <div class="info-item-box">
              <span class="info-title-box">税务登记银行账号：</span
              >{{ info.invoice.invoice_bank_no }}
            </div>
          </el-col>
          <el-col
            :span="12"
            v-if="
              info.state == 2 &&
              info.invoice.invoice_type == 2 &&
              info.total_price > 0
            "
          >
            <div class="info-item-box">
              <span class="info-title-box">发票文件：</span>
              <el-button
                type="text"
                size="mini"
                icon="el-icon-search"
                @click="getInvoice()"
                v-if="!info.fp_url"
                >获取电子发票</el-button
              >
              <a :href="info.fp_url" download="电子发票" v-else
                ><el-button type="text" size="mini" icon="el-icon-download"
                  >下载电子发票</el-button
                ></a
              >
            </div>
          </el-col>
        </el-row>
      </div>
      <div class="title-box">批改人员列表</div>
      <el-tabs v-model="form.type" @tab-click="handleClick">
        <el-tab-pane label="批增人员" name="1"></el-tab-pane>
        <el-tab-pane label="批减人员" name="2"></el-tab-pane>
      </el-tabs>
      <el-table size="mini" :data="list.data" border v-loading="loading">
        <el-table-column label="姓名" prop="name"></el-table-column>
        <el-table-column label="身份证号" prop="id_card"></el-table-column>
        <el-table-column label="生效日期" prop="start_time"></el-table-column>
        <el-table-column label="失效日期" prop="end_time"></el-table-column>
        <el-table-column label="保单金额" prop="price"></el-table-column>
      </el-table>
      <div class="page-box">
        <el-pagination
          background
          small
          :current-page="list.current_page"
          :page-size="list.per_page"
          layout="total, prev, pager, next, jumper"
          :total="list.total"
          @current-change="changePage"
        ></el-pagination>
      </div>
      <div class="detail-footer-box" v-if="info.state == 1">
        <div class="footer-text-box">
          <span class="text-grey"
            >批增人员{{ info.inc_num }}人，批减人员{{ info.dec_num }}人</span
          >
          <span class="total-price-box"
            >合计保费：{{ info.total_price }}元</span
          >
        </div>
        <div class="footer-btn-box">
          <el-button size="small" style="width: 100px" @click="cancel()"
            >取消</el-button
          >
          <span v-if="info.total_price > 0">
            <el-button
              type="primary"
              size="small"
              style="width: 100px"
              @click="payDo(1)"
              >在线支付</el-button
            >
            <el-button
              type="primary"
              size="small"
              style="width: 100px"
              @click="payDo(2)"
              v-if="info.type == 1"
              >线下支付</el-button
            >
          </span>
          <el-button type="primary" size="small" v-else @click="nopay()"
            >确认提交到保司</el-button
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        id: "",
        type: "1",
        page: 1,
      },
      loading: true,
      load: true,
      list: {
        current_page: 1,
        data: [],
      },
      info: {
        invoice: {},
        state: 1,
      },
      str: "00小时00分00秒",
      timer: "",
    };
  },
  mounted() {
    this.form.id = this.$route.params.id;
    this.getData();
    this.getInfo();
  },
  methods: {
    getInvoice() {
      console.log(this.id);
      this.loading = true;
      this.ajaxs(
        this.info.type == 1
          ? "order/changeInvoice"
          : "paorder/getChangeInvoice",
        {
          data: { id: this.form.id },
          success: (res) => {
            this.loading = false;
            if (res.code) {
              this.getInfo();
            }
            this.toast(res.code, res.msg);
          },
        }
      );
    },
    getData() {
      this.loading = true;
      this.ajaxs("order/getEndorseUser", {
        data: this.form,
        success: (res) => {
          this.list = res.msg;
          this.loading = false;
        },
      });
    },
    getInfo() {
      this.load = true;
      this.ajaxs("order/getEndorseInfo", {
        data: this.form,
        success: (res) => {
          this.info = res.msg;
          this.load = false;
          this.setTime(this.info.num);
        },
      });
    },
    changePage(e) {
      this.form.page = e;
      this.getData();
    },
    handleClick() {
      this.form.page = 1;
      this.getData();
    },
    setTime(num) {
      console.log(num);
      var h = 0;
      var m = 0;
      var s = 0;
      this.timer = setInterval(() => {
        if (num > 0) {
          num--;
          h = Math.floor(num / 3600);
          m = Math.floor((num % 3600) / 60);
          s = Math.floor((num % 3600) % 60);
          this.str =
            (h < 10 ? "0" + h : h) +
            "小时" +
            (m < 10 ? "0" + m : m) +
            "分钟" +
            (s < 10 ? "0" + s : s) +
            "秒";
        } else {
          clearInterval(this.timer);
          //请求数据取消订单
          this.ajaxs(
            this.info.type == 1
              ? "order/cancelEndorse"
              : "paorder/cancelEndorse",
            {
              data: { id: this.form.id },
              success: (res) => {
                if (res.code) {
                  this.getInfo();
                }
              },
            }
          );
        }
      }, 1000);
    },
    cancel() {
      this.ajaxs(
        this.info.type == 1 ? "order/cancelEndorse" : "paorder/cancelEndorse",
        {
          data: { id: this.form.id },
          success: (res) => {
            this.toast(res.code, res.msg);
            if (res.code) {
              this.getInfo();
            }
          },
        }
      );
    },
    nopay() {
      this.loading = true;
      this.ajaxs(
        this.info.type == 1
          ? "order/updateOrderNoPay"
          : "paorder/updateOrderNoPay",
        {
          data: { id: this.form.id },
          success: (res) => {
            if (res.code) {
              this.getInfo();
            } else {
              this.toast(res.code, res.msg);
            }
            this.loading = false;
          },
        }
      );
    },
    payDo(type) {
      this.loading = true;
      this.ajaxs(
        this.info.type == 1 ? "order/updateOrderPay" : "paorder/updateOrderPay",
        {
          data: { id: this.form.id, type: type },
          success: (res) => {
            if (res.code) {
              window.open(res.msg);
            } else {
              this.toast(res.code, res.msg);
            }
            this.loading = false;
          },
        }
      );
    },
    //批单获取
    huoq() {
      if (this.info.type == 1) {
        return false;
      }
      this.loading = true;
      this.ajaxs("paorder/getChangeNo", {
        data: { id: this.info.id },
        success: (res) => {
          if (res.code) {
            this.getInfo();
          }
          this.toast(res.code, res.msg);
          this.loading = false;
        },
      });
    },
  },
  watch() {
    if (this.$route.params.id) {
      this.form.id = this.$route.params.id;
      this.getData();
      this.getInfo();
    }
  },
};
</script>

<style scoped>
@import "../../assets/css/order/endorse.css";
</style>
